<template>
	<view class="current_color">
		<view>
			<uni-search-bar class="uni-mt-10" radius="7" placeholder="自动显示隐藏"   clearButton="auto" cancelButton="none"
				@confirm="search">
			</uni-search-bar>

			<liu-dropdown :menuList="menuList" :dataObj="dataObj" @change="change"></liu-dropdown>
		</view>

		<view class="list_margin">
			<zlxls-goods-edit-list @gotoDetail="goToActivityDetail" @signUpClick="signUpClick"
				:list="doubleFilteredActivityList"></zlxls-goods-edit-list>
		</view>
	</view>

</template>

<script>
	import liuDropdownVue from "../../components/liu-dropdown/liu-dropdown.vue";
	import zlxlsGoodsEditList from "@/components/zlxls-goods-edit-list/zlxls-goods-edit-list.vue";
	import {
		getActivityList
	} from '@/pages/api/seek.js'
	export default {
		components: {
			zlxlsGoodsEditList
		},
		data() {
			return {
				menuList: [{
					id: 1,
					name: '活动类型',
					isMultiple: false, //是否多选
					showType: 3 //下拉框类型(1、2、3、4)
				}, {
					id: 2,
					name: '全城',
					isMultiple: false, //是否多选
					showType: 3 //下拉框类型(1、2、3、4)
				}, ],
				//下拉框数据源
				dataObj: {
					//类型1数据结构
					itemList1: [{
						id: 1,
						name: '公益活动'
					}, {
						id: 2,
						name: '室内活动'
					}, {
						id: 3,
						name: '室外活动'
					}, {
						id: 4,
						name: '其他活动'
					}],
					itemList2: [{
						id: 1,
						name: '全城'
					}, {
						id: 2,
						name: '历下区'
					}, {
						id: 3,
						name: '历城区'
					}, {
						id: 4,
						name: '章丘区'
					}]
					//类型2数据结构
					// itemList2: [{
					// 	id: 1,
					// 	name: '地区',
					// 	childs: [{
					// 		id: 1,
					// 		name: '学校'
					// 	}, {
					// 		id: 2,
					// 		name: '火车站'
					// 	}]
					// }, {
					// 	id: 2,
					// 	name: '商场',
					// 	childs: [{
					// 		id: 1,
					// 		name: '北京华联'
					// 	}, {
					// 		id: 2,
					// 		name: '国芳百货'
					// 	}, {
					// 		id: 3, 
					// 		name: '欣大'
					// 	}]
					// }]
				},
				doubleFilteredActivityList: [],
				filteredActivityList: [],
				activityList: [
					// {
					// 	"id": 14,
					// 	"name": "业主羽毛球比赛报名开始了",
					// 	"image": "/static/activity/badminton1.jpg",
					// 	"total": "220",
					// 	"number": 10,
					// 	"create_at": "2024-05-01 12:00:00",
					// 	"end_at": "2024-05-07 12:00:00",
					// 	"content": "活动内容如下"
					// },
					// {
					// 	"id": 14,
					// 	"name": "社区活动报名啦",
					// 	"image": "/static/activity/badminton1.jpg",
					// 	"total": "120",
					// 	"number": 10,
					// 	"create_at": "2024-07-14 12:00:00",
					// 	"end_at": "2024-07-16 12:00:00",
					// 	"content": "活动内容如下"
					// }
				]
			}
		},
		methods: {
			search(res) {
				if (res.value.trim() === '') {
					this.filteredActivityList = this.activityList
				} else {
					this.filteredActivityList = this.activityList.filter(item => {
						return (
							item.title.includes(res.value) || item.content.includes(res.value)
						);
					});
				}
				this.doubleFilteredActivityList = this.filteredActivityList
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			change(res) {
				console.log("res:", res);

				let chooseObj = res.chooseInfo;
				let arr = [];
				for (let i in chooseObj) {
					console.log("chooseObj[i]: ",chooseObj[i])
					
					chooseObj[i].forEach(item => {
						console.log("item: ",item)
						if (item.chooseState) {
							this.filteredActivityList.forEach(activity => {
								if(activity.type.includes(item.id)){
									arr.push(activity);
								}
							});
							
							console.log("arr: ",arr);
						}
					})
				}
				
				this.doubleFilteredActivityList = arr;
				console.log("filteredActivityList: ",this.filteredActivityList);
				console.log("doubleFilteredActivityList: ",this.doubleFilteredActivityList);
			},
			loadActivityList() {
				getActivityList().then(data => {
					console.log("getActivityList");
					const tmpActivityList = data.rows;
					this.activityList = tmpActivityList.map(activity => {
						return {
							id: activity.activityId,
							title: activity.activityTitle,
							subTitle: '',
							type: activity.activityType,
							number: activity.current,
							total: activity.total,
							content: activity.activityContent,
							create_at: activity.activityStartTime,
							end_at: activity.activityEndTime,
							description: activity.remark,
							// 可以继续添加其他需要转换的属性  
						};
					});
					this.filteredActivityList = this.activityList;
					this.doubleFilteredActivityList = this.filteredActivityList
					console.log(this.activityList);
					// 处理数据...  
				}).catch(error => {
					console.error('Error fetching data with params:', error);
				});
			},
			goToActivityDetail(item) {
				console.log("activity_detail_tmp");
				console.log(item);
				uni.navigateTo({
					url: "activity_detail?item=" + encodeURIComponent(JSON.stringify(item)) // 指定要跳转到的页面的路径  
				});
			},
			signUpClick(item, value, name) {
				console.log("signUpClick");
				console.log(item);
				uni.navigateTo({
					url: "activity_detail?item=" + encodeURIComponent(JSON.stringify(item.item))
				});
			}
		},
		onShow() {
			this.loadActivityList();
		},
		onLoad() {
			this.loadActivityList();
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	.list_margin {
		margin-top: 120rpx;
	}

	.current_color {
		background-color: #fff;
		// overflow: hidden;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>